<%@ page import="com.atguigu.service.impl.ServiceServiceImpl" %>
<%@ page import="com.atguigu.service.ServiceService" %>
<%@ page import="com.atguigu.service.ServerService" %>
<%@ page import="com.atguigu.service.impl.ServerServiceImpl" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/pages/common/headAndWelcome.jsp" %><%--静态引用,包括项目起始点,和css,jquery等头部信息 --%>
<c:if test="${!empty service}">
    <title>${server.name}${service.name}的内部配置</title>
</c:if>
<c:if test="${empty service}">
    <title>全部docker的container</title>
</c:if>

<%--<div class="container-fluid "> <!--table行-->--%>

    <div class="container-fluid ">
    <h1 class="text-center">
        <c:if test="${!empty service}">
            <span class="uppercase">${server.name}/${service.name}</span> service配置页面:<span class="red">容器</span>&nbsp&nbsp(空闲端口号:${server.freePorts})</h1>
        </c:if>
        <c:if test="${empty service}">
            <span class="uppercase">全部/docker </span> service配置页面:<span class="red">容器</span></h1>
        </c:if>

    <table class="table table-striped table-bordered table-hover col-md-6 col-lg-6 docker" style="table-layout:inherit">
        <thead class="thead">
        <tr>
            <th><input type="checkbox"> 全选</th>
            <th class="col-md-1 ">编号</th>
            <th class="">服务器</th>
            <th class="">名称</th>
            <th class="col-md-1">img版本</th>
            <th class="">cpu/memory</th>
            <th class="">volume</th>
            <th class="">ip</th>
            <th class="">portMap</th>
            <th class="">use</th>
            <th class="">endTime</th>
            <th class=" text-center">操作
            </th>
        </tr>
        </thead>
            <tbody>
            <% Integer count=1;%>
            <c:forEach items="${requestScope.containers}" var="container" varStatus="containerStatus">
                <tr class="tr">
                    <td class="number">
                        <input type="checkbox">
                        <%=count++%>
                    </td>
                    <td class="id">${container.id}</td>
                    <td class="server">
<%--                            ${serverService.queryServerById(container.serverId).name}--%>
                                <c:if test="${empty server}">
                                    <!--如果server为空,那我就需要遍历server列表,做成select列表-->
                                    <select class="form-control serverEdit">
                                        <option value="default">请选择服务器</option>
                                        <c:forEach items="${requestScope.servers}" var="server">
                                            <option value="${server.id}"
                                                    <c:if test="${server.name.equals(serverService.queryServerById(container.serverId).name)}">
                                                        selected
                                                    </c:if>
                                            >${server.name}</option>
                                        </c:forEach>
                                    </select>
                                </c:if>
                                <!--如果不为空,那就直接用这个server的名字就行了-->
                                <c:if test="${!empty server}">
                                    ${server.name}
                                </c:if>
                        <%--这是渲染阶段--%>
                    </td>
                    <td class="name">
                        <input value="${container.name}" class="form-control nameEdit" placeholder="如:jining4.0" type="text">
                    </td>
                    <td class="imageVersion">
                        <input value="${container.imageVersion}" class="form-control imageVersionEdit" placeholder="如:lhwl4.0:mysql-proxy" type="text">
                    </td>
                    <td class="cpuMemory">
                        <input value="${container.cpu}/${container.memory}" class="form-control cpuMemoryEdit" placeholder="如:4/8" type="text">
                    </td>
                    <td class="volume">
                        <input value="${container.volume}" class="form-control volumeEdit" placeholder="如:/lhwl/data/docker/containers/jining4.0" type="text">
                    </td>
                    <td class="ip">
                        <input value="${container.ip}" class="form-control ipEdit" placeholder="如:1.1.1.1/24" type="text">
                    </td>
                    <td class="portMap">
                        <input value="${container.portMap}" class="form-control portMapEdit" placeholder="如:80:80,81:3306" type="text">
                    </td>
                    <td class="use">
                        <input value="${container.use}" class="form-control useEdit" placeholder="如:jining4.0" type="text">
                    </td>
                    <td class="endTime">
                        <input value="${container.endTime}" class="form-control endTimeEdit" placeholder="如:2021-04-13" type="text">
                    </td>
                    <td class="detail text-center">
                        <div class="btn-group">
                            <div class="btn btn-default glyphicon glyphicon-ok update hand"></div>
                            <div class="btn btn-default glyphicon glyphicon-remove delete hand"></div>
                        </div>
                    </td>
                </tr>
            </c:forEach>
            <tr class="tr">
                <td class="number">
                    <input type="checkbox">
                    <%=count++%>
                </td>
                <td class="id createSign">创建时会自动添加</td>
                <td class="server">
                    <c:if test="${empty server}">
                        <!--如果server为空,那我就需要遍历server列表,做成select列表-->
                        <select class="form-control serverEdit">
                            <option value="default">请选择服务器</option>
                            <c:forEach items="${requestScope.servers}" var="server">
                                <option value="${server.id}">${server.name}</option>
                            </c:forEach>
                        </select>
                    </c:if>
                        <!--如果不为空,那就直接用这个server的名字就行了-->
                    <c:if test="${!empty server}">
                        ${server.name}
                    </c:if>
                    <%--这是添加阶段的--%>
                </td>
                <td class="name">
                    <input class="form-control nameEdit" placeholder="如:jining4.0" type="text">
                </td>
                <td class="imageVersion">
                    <input class="form-control imageVersionEdit" placeholder="如:lhwl4.0:mysql-proxy" type="text">
                </td>
                <td class="cpuMemory">
                    <input class="form-control cpuMemoryEdit" placeholder="如:4/8" type="text">
                </td>
                <td class="volume">
                    <input class="form-control volumeEdit" placeholder="如:/lhwl/data/docker/containers/jining4.0" type="text">
                </td>
                <td class="ip">
                    <input class="form-control ipEdit" placeholder="如:1.1.1.1/24" type="text">
                </td>
                <td class="portMap">
                    <input class="form-control portMapEdit" placeholder="如:80:80,81:3306" type="text">
                </td>
                <td class="use">
                    <input class="form-control useEdit" placeholder="如:jining4.0" type="text">
                </td>
                <td class="endTime">
                    <input class="form-control endTimeEdit" placeholder="如:2021-04-13" type="text">
                </td>
                <td class="detail text-center col-lg-1">
                    <div class="btn-group">
                        <div class="btn btn-default glyphicon glyphicon-ok update hand"></div>
                        <div class="btn btn-default glyphicon glyphicon-remove delete hand"></div>
                    </div>
                </td>
            </tr>
            </tbody>
    </table><!--容器区-->
</div>
    <form class="bs-example bs-example-form dropdownAndInputForm changeTarget hidden" role="form">
        <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="text">二级</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdownAndInput">
                            <li>
                                <a class="option">nginx</a>
                            </li>
                            <li>
                                <a class="option">php</a>
                            </li>
                            <li>
                                <a class="option">docker</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input type="text" class="form-control input" style="width: 100px">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form> <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->
    <div class="modal fade " id="update" tabindex="-1" role="dialog" aria-labelledby="updateLabel" aria-hidden="true">
        <!--这一区域是用来为update行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="updateLabel">提交修改</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitUpdate">提交更改</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为update行为提供模态框的-->
    <div class="modal fade " id="delete" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true">
        <!--这一区域是用来为delete行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="deleteLabel">提交删除</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitDelete">提交删除</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为delete行为提供模态框的-->
    <p>config按钮要做成跳转的,在后台拿到配置文件在前台做textarea  创建 定义 配置 (详细配置 生成服务)</p>
<%--</div>--%>
<!--table行-->
</body>
<script>
    $("table").click(function (event) {//detail 操作模块的点击事件,利用冒泡
        let eventTarget = $(event.target);
        let table=$(eventTarget).closest("table");
        if (eventTarget.hasClass('update')) {//此时,已经明确了触发事件的元素是"create"元素,下一步获取整个tr-json对象
            if (eventTarget.closest("table").find(".form-control").length>1) {
                $("#update").modal("show")
                $('.yaotijiaodedian').remove('yaotijiaodedian')
                $(eventTarget).addClass("yaotijiaodedian")
            } else {
                confirm("没有修改,不能提交")
            }
        }//此时,已经明确了触发事件的元素是"update"元素,下一步获取整个tr-json对象
        if (eventTarget.hasClass('delete')) {//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            $("#delete").modal("show")
            $('.yaotijiaodedian').remove('yaotijiaodedian')
            $(eventTarget).addClass("yaotijiaodedian")
        }//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
    })//table 的点击事件,利用冒泡

    $("#submitUpdate").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        console.log(1)
        let eventTarget = $('.yaotijiaodedian')
        let trObjData = {};
        let table=eventTarget.closest("table");
        let trObj=eventTarget.closest(".tr");
        if(table.hasClass("docker")){
            <c:if test="${empty server}">
                trObjData["serverId"]=trObj.find(".serverEdit:first").val();
            </c:if>
            <c:if test="${!empty server}">
                trObjData["serverId"]="${server.id}";
            </c:if>
            //获取serverId
            let idObj=trObj.find(".id");
            if(idObj.hasClass("createSign")){//有新增标志
                trObjData["id"]=null;
            }else{//没有新增标识,表示update,需要从单元格中获取container Id
                trObjData["id"]=idObj.text();
            }//获取containerId
            let arr = ["name","imageVersion", "cpuMemory", "volume","ip","portMap","use","endTime"];
            trObj.find(".form-control").each(function (index,element){
                for (let i in arr) { //不写这个就要把上面的这个if写5次
                    if ($(element).hasClass(arr[i] + "Edit")) {
                        trObjData[arr[i]] = $(element).val()
                    }
                }//不写这个就要把上面的这个if写8次
            })//收集参数
            // console.log(trObj)
            // return
            console.log(trObjData)
            //return
            $.ajax({
                type: "post",
                url: "<%=basepath%>containerServlet?action=ajaxConfigContainer&configType=docker",
                data: trObjData,
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    console.log(response)
                    if (response == "存入成功") {
                        //console.log("存入成功")
                        alert("存入成功")
                        <c:if test="${empty server}">
                            location.href = "<%=basepath%>containerServlet?action=list";
                        </c:if>
                        <c:if test="${!empty server}">
                            location.href = "<%=basepath%>containerServlet?action=list&serviceId=${service.id}";
                        </c:if>
                    } else {
                        alert("存入失败,请看consoleLog");
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }
    })//这是更新的模态框点击了确定键后搜索数据并提交的过程
    $("#submitDelete").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        let eventTarget = $('.yaotijiaodedian')
        let table=eventTarget.closest("table");
        let trObj=eventTarget.closest(".tr");
        //console.log(trObj.find(".id:first").text())
        if(table.hasClass("docker")){
            $.ajax({
                type: "post",
                url: "<%=basepath%>containerServlet?action=ajaxConfigContainer&serviceId=${service.id}&delete=true&configType=docker",
                data: {"id": trObj.find(".id:first").text()},
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    console.log(response)
                    if (response == "删除成功") {
                        alert("删除成功")
                        <c:if test="${empty server}">
                        location.href = "<%=basepath%>containerServlet?action=list";
                        </c:if>
                        <c:if test="${!empty server}">
                        location.href = "<%=basepath%>containerServlet?action=list&serviceId=${service.id}";
                        </c:if>
                    } else {
                        alert("删除失败");
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }

    })//这是删除的模态框点击了确定键后搜索数据并提交的过程
</script>
<!--表格点击事件-->
</html>